import React, { useState, useEffect } from "react";
import UserOrder from "./Detail/UserOrder";
import UserIntegral from "./Detail/UserIntegral";
import UserGrowth from "./Detail/UserGrowth";
import UserCoupons from "./Detail/UserCoupons";
import axios from "../../../model/User";
import {
  Input,
  Select,
  DatePicker,
  Space,
  Button,
  Table,
  Radio,
  Divider,
  message,
  Tag,
  Switch,
  Modal,
  Tabs,
} from "antd";
const { TabPane } = Tabs;
export default function Detail() {
  let [data, setdata] = useState<any>();
  useEffect(() => {
    let id = window.location.hash.substring(25);

    // console.log(id)
    axios.query({ id }).then((res) => {
      console.log(res.data);
      setdata(res.data[0]);
    });
  }, []);
  function callback(key: any) {
    console.log(key);
  }
  return (
    <div className="userdeail">
      <div
        style={{ fontSize: "20px", padding: "30px", backgroundColor: "#fff" }}
      >
        用户详情
      </div>
      <div
        style={{
          padding: "30px",
          backgroundColor: "#fff",
          marginTop: "20px",
          height: "300px",
        }}
      >
        <p>基础资料</p>
        <div>
          <div style={{ float: "left", marginTop: "20px" }}>
            <img
              style={{ marginLeft: "30px" }}
              src="https://www.pmdaniu.com/storages/127806/a2790bc912aee93deaaa4adce2900909-105941/images/%E7%94%A8%E6%88%B7%E8%AF%A6%E6%83%85/u5093.svg"
              alt=""
            />
            <br></br>
            <Button
              type="primary"
              style={{ marginLeft: "15px", marginTop: "20px" }}
            >
              编辑资料
            </Button>
          </div>
          <div style={{ float: "left", marginLeft: "100px" }}>
            <div style={{ width: "900px", height: "30px", lineHeight: "30px" }}>
              <div style={{ float: "left", width: "300px" }}>
                <span>用户姓名：</span>
                <span>{data?.username}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>手机号码：</span>
                <span>{data?.tel}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>用户ID：</span>
                <span>{data?.id}</span>
              </div>
            </div>
            <div style={{ width: "900px", height: "30px", lineHeight: "30px" }}>
              <div style={{ float: "left", width: "300px" }}>
                <span>用户性别：</span>
                <span>{data?.gender}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>用户年龄：</span>
                <span>{data?.age}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>微信号：</span>
                <span>{data?.weixin}</span>
              </div>
            </div>
            <div style={{ width: "900px", height: "30px", lineHeight: "30px" }}>
              <div style={{ float: "left", width: "300px" }}>
                <span>用户职业：</span>
                <span>{data?.professional}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>常用收货人：</span>
                <span>{data?.consignee}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>详细地址：</span>
                <span>{data?.address}</span>
              </div>
            </div>
            <div style={{ width: "900px", height: "30px", lineHeight: "30px" }}>
              <div style={{ float: "left", width: "300px" }}>
                <span>来源方式：</span>
                <span>{data?.source}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>注册时间：</span>
                <span>{data?.registerTime}</span>
              </div>
              <div style={{ float: "left", width: "300px" }}>
                <span>最近登录时间：</span>
                <span>{data?.loginTime}</span>
              </div>
            </div>
            <div style={{ width: "900px", height: "30px", lineHeight: "30px" }}>
              <div style={{ float: "left", width: "300px" }}>
                <span>备注：</span>
                <span>{data?.note}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{ padding: "30px", backgroundColor: "#fff", marginTop: "20px" }}
      >
        <p>
          用户标签&nbsp;&nbsp;&nbsp;&nbsp;<Button>编辑标签</Button>
        </p>
        {data?.tags.map((item: any) => {
          return <Tag key={item}>{item}</Tag>;
        })}
      </div>
      <div
        style={{
          padding: "30px",
          backgroundColor: "#fff",
          marginTop: "20px",
          height: "240px",
        }}
      >
        <p>用户资产</p>
        <div style={{ display: "flex" }}>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>累计积分</div>
            <div
              style={{ height: "60px", lineHeight: "60px", fontSize: "24px" }}
            >
              {data?.integral}
            </div>
            <div>
              <Button>修改积分</Button>
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>累计成长值</div>
            <div
              style={{ height: "60px", lineHeight: "60px", fontSize: "24px" }}
            >
              {data?.growth}
            </div>
            <div>
              <Button>修改成长值</Button>
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>付费会员卡</div>
            <div
              style={{ height: "60px", lineHeight: "60px", fontSize: "24px" }}
            >
              {data?.orderAmount < 500
                ? "周卡会员"
                : data?.orderAmount < 1500
                ? "月卡会员"
                : "年度会员"}
            </div>
            <div>
              <Button>查看</Button>
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>会员等级</div>
            <div
              style={{ height: "60px", lineHeight: "60px", fontSize: "24px" }}
            >
              {data?.viptype == 1
                ? "普通会员"
                : data?.viptype == 2
                ? "金卡会员"
                : data?.viptype == 3
                ? "银卡会员"
                : data?.viptype == 4
                ? "白金会员"
                : "钛金会员"}
            </div>
            <div>
              <Button>查看</Button>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          padding: "30px",
          backgroundColor: "#fff",
          marginTop: "20px",
          height: "240px",
        }}
      >
        <p>行为统计</p>
        <div style={{ marginTop: "30px", display: "flex" }}>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>下单数量</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.orderNum}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>下单金额</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.orderAmount}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>最近消费时间</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.buyTime}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>今日学习时长(h)</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.todayStudyTime}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>学习总时长(h)</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.StudyTime}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>学习总课程数量</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.course}
            </div>
          </div>
          <div style={{ float: "left", textAlign: "center", flex: "1" }}>
            <div>完成总课程数量</div>
            <div
              style={{ height: "50px", lineHeight: "50px", fontSize: "22px" }}
            >
              {data?.overCourse}
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          padding: "30px",
          backgroundColor: "#fff",
          marginTop: "20px",
          height: "500px",
        }}
      >
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="用户订单" key="1">
            <UserOrder/>
          </TabPane>
          <TabPane tab="用户积分" key="2">
            <UserIntegral></UserIntegral>
          </TabPane>
          <TabPane tab="用户成长值" key="3">
            <UserGrowth></UserGrowth>
          </TabPane>
          <TabPane tab="用户优惠券" key="4">
            <UserCoupons></UserCoupons>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
}
